<template>
	<view class="p-4 m-2 flex rounded transition-all" @tap="$emit('collect',v)"
	:active="collectTopics.includes(v)"
	>
		<c-image :src="v.url" mode="aspectFill" class="cover rounded"/>
		<view class="flex flex-column justify-between ml-3 ">
			<text class="font-lg">{{v.title}}</text>
			<text class="font">{{v.desc||'------'}}</text>
<!-- :threshold="[60000,3600000*24]" -->
			<uni-dateformat class="font-sm secondary-color" :date="v.creat_date"
			format="yyyy-MM-dd" 
			></uni-dateformat>
			
		</view>
		
		<view class="bg-hover-light my-2"
		style="height: 10rpx; opacity: .4;"
		>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			v:{
				type:Object,
				default:()=>({})
			},
			collectTopics:{
				type:Array,
				default:()=>[]
			}
		}
	}
</script>

<style scoped>
	.cover{
		width: 250rpx;
		height: 250rpx;
	}
	[active=true]{
		background-color: #f0f0f0;
		
	}
	[active=false]{
		background-color: none;
		
	}
</style>